function pollElementAsync(selector, timeout, interval) {
  return new Promise((resolve, reject) => {
    let startTime = Date.now();
    let endTime = startTime + timeout;

    let intervalId = setInterval(function () {
      if (Date.now() < endTime) {
        let element = document.querySelector(selector);
        if (element) {
          clearInterval(intervalId);
          resolve(element);
        }
      } else {
        clearInterval(intervalId);
        reject(new Error("超过指定时间，未找到指定元素"));
      }
    }, interval);
  });
}



console.log("注入角色列表");
let currentURL = window.location.href;
console.log("当前URL是：", currentURL);

let btn = document.querySelector(
  "#app > div > div.login-container > form > button"
);
console.log("btnLogin", btn);


pollElementAsync("#app > div > div.login-container > form > button", 5000, 100)
.then((element) => {
  console.log("找到指定元素:", element);
  addLogin();

})
.catch((error) => {
  console.error(error);
});



function clickLogin() {
  console.log("元素被点击了！,登录键");
  pollElementAsync("#app > section > section > div > div:nth-child(1) > div > div.header-tool > button", 5000, 100)
  .then((element) => {
    console.log("找到指定元素:", element);
    //给按钮添加点击事件
    element.addEventListener("click", clickOut);
  })
  .catch((error) => {
    console.error(error);
  });
}

function clickOut() {
  console.log("元素被点击了！,退出键");
  pollElementAsync("#app > div > div.login-container > form > button", 5000, 100)
  .then((element) => {
    console.log("找到指定元素:", element);
    //给按钮添加点击事件
    element.addEventListener("click", clickLogin);
    addList();
  })
  .catch((error) => {
    console.error(error);
  });
}

function addList() {
  //角色列表
  const userList = [
    {name: "在线人核", user: "128001828", password: "Aa@12333"},
    {name: "黄定勇", user: "00000210", password: "Aa@12333"},
    {name: "操作员",user: "163002005",password: "Aa@12333"},
    {name: "分管总",user: "163002006",password: "Aa@12333"},
    {name: "总公司审核人",user: "163002002",password: "Aa@12333"},
    {name: "分公司经理",user: "163002001",password: "Aa@12333"},
    {name: "root", user: "root", password: "Aa@12333"},
  ];
  let userEl = document.querySelector("#app > div > div.login-container > form > div:nth-child(2) > div > div > input")
  let passwordEl = document.querySelector("#app > div > div.login-container > form > div:nth-child(3) > div > div > input")
  
  let fel = document.querySelector("#app > div > div.login-container > form > p");
  fel.style.display = "flex";
  fel.style.justifyContent = "space-between";
  let myButton = document.createElement("div");
  myButton.innerHTML = "人员列表";
  fel.appendChild(myButton);
  
  
  
  let listDiv = document.createElement("div");
  listDiv.classList.add("listDiv");
  
  let fel2 = document.querySelector("#app > div > div.login-container > form");
  fel2.appendChild(listDiv);
  
  function createItem(item) {
    let itemDiv = document.createElement("div");
    itemDiv.innerHTML = `${item.name}：${item.user}`;
    itemDiv.classList.add("listItem");
    itemDiv.addEventListener("click", () => {
      
      console.log(item.name);
      console.log(item.user);
      console.log(item.password);
      userEl.value = item.user;
      passwordEl.value = item.password;
          // 创建一个 change 事件
      var event = new Event("input", {
        bubbles: true, // 允许事件冒泡
        cancelable: true, // 允许事件被取消
      });
  
      // 触发 change 事件
      userEl.dispatchEvent(event);
      passwordEl.dispatchEvent(event);
  
    });
    listDiv.appendChild(itemDiv);
  }
  
  userList.forEach((element) => {
    createItem(element);
  });
  
  let styleTag = document.createElement("style");
  styleTag.textContent = `
    .listDiv{
      width: 300px;
      background-color: rgb(255, 255, 255);
      position: absolute;
      top: 0px;
      left: 336px;
      box-shadow: rgb(180, 180, 180) 0px 2px 8px 0px;
      padding: 15px 0;
      display: block;
    }
    .listItem{
      height: 36px;
      line-height: 36px;
      text-align: left;
      padding: 0 32px;
      cursor: pointer;
    }
    .listItem:hover{
      background-color: #dcdfe6;
    }
  `;
  document.head.appendChild(styleTag);
  
  myButton.addEventListener("click", function () {
    if (listDiv.style.display == '' || listDiv.style.display == "none") {
      listDiv.style.display = "block"; // 显示元素
    } else {
      listDiv.style.display = "none"; // 隐藏元素
    }
  });
}

function addLogin() {
  let btnLogin = document.querySelector(
    "#app > div > div.login-container > form > button"
  );
  btnLogin.addEventListener("click", clickLogin);
  addList();
}
